<template>
  <div>
<!-- <BlogAllInfo :ItBlogId="3"></BlogAllInfo> -->
<!-- <BlogPage2List :Id="1" :ItBlogId="1" :ItBlogAuthor="18" :ItBlogText="6666777" :ItMusicId="3" :ItMusicName="11117" :ItPageView="10"></BlogPage2List> -->
<!-- <van-grid >
  <van-grid-item :square="true" :column-num="2" >
    <BlogPage2List :Id="1" :ItBlogId="1" :ItBlogAuthor="18" :ItBlogText="6666777" :ItMusicId="3" :ItMusicName="11117" :ItPageView="10"></BlogPage2List>
  </van-grid-item>
  <van-grid-item > 
    <BlogPage2List :Id="1" :ItBlogId="1" :ItBlogAuthor="18" :ItBlogText="6666777" :ItMusicId="3" :ItMusicName="11117" :ItPageView="10"></BlogPage2List>
  </van-grid-item>

</van-grid> -->


 <userPage2blog
        :ItuserId="tbUser.userId" 
        :ItuserName="tbUser.userName" 
        :ItuserIcon="tbUser.userIcon">
 </userPage2blog>

<van-pagination v-model="this.current" 
    :total-items="this.total"
     :show-page-size="5"
     :items-per-page="this.pageSize"
    force-ellipses
    @change="pageChange"
    >
      <template #prev-text>
        <van-icon name="arrow-left" />
      </template>
      <template #next-text>
        <van-icon name="arrow" />
      </template>
      <template #page="{ text }">{{ text }}</template>
    </van-pagination>

<van-row>
  <van-col span="12">
    <!-- 左边  index%2 =0 -->
    <!-- <BlogPage2List :Id="1" :ItBlogId="1" :ItBlogAuthor="18" :ItBlogText="6666777" :ItMusicId="3" :ItMusicName="1110000017" :ItPageView="10000"></BlogPage2List> -->
    <van-list
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        >
        <BlogPage2List 
        v-for="item in blogListLeft"
        :key="item.blogId"
        :Id="item.blogId"
        :ItBlogId="item.blogId"
        :ItBlogText="item.blogText"
        :ItBlogAuthor="item.blogAuthor"
        :ItMusicId="item.musicId"
        :ItMusicName="item.musicName"
        :ItPageView="item.pageView"
        >
        </BlogPage2List >
    </van-list>


  </van-col>
  <van-col span="12">
    <!-- 右边 index%2 !=0  -->
     <!-- <BlogPage2List :Id="3" :ItBlogId="3" :ItBlogAuthor="18" :ItBlogText="6666777" :ItMusicId="3" :ItMusicName="11117" :ItPageView="10"></BlogPage2List> -->
     <van-list
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        >
        <BlogPage2List 
        v-for="item in blogListRight"
        :key="item.blogId"
        :Id="item.blogId"
        :ItBlogId="item.blogId"
        :ItBlogText="item.blogText"
        :ItBlogAuthor="item.blogAuthor"
        :ItMusicId="item.musicId"
        :ItMusicName="item.musicName"
        :ItPageView="item.pageView"
        >
        </BlogPage2List >
    </van-list>

   
    </van-col>
</van-row>


  </div>
</template>

<script>
import BlogAPI from '@/api/BlogAPI'
import BlogAllInfo from './BlogAllInfo.vue'
import BlogPage2List from './BlogPage2List.vue'
import UserAPI from '@/api/UserAPI'
import userPage2blog from '@/views/User/UserInfo/userPage2blog.vue'

// import Vue from 'vue';
// import { Grid, GridItem } from 'vant';

// Vue.use(Grid);
// Vue.use(GridItem);

export default {
name: 'Music2BlogList',
components:{
  BlogAllInfo,
BlogPage2List,
userPage2blog

},
data() {
  return {
    userId: '',
    blogList:[],
    blogListLeft:[],
    blogListRight:[],
    // 页码
    pageNumber: 1,
    // 页大小
    pageSize: 6,
    // 当前页码
    current: 0,
    page: 0,
    // 总条数
    total: 0,
    tbUser:{},
  }
},

created() {

  var Id1 = localStorage.getItem("userId",this.userId)
     if(this.$route.params.id == null){
      this.userId=Id1
     }else{
      this.userId=this.$route.params.id
      localStorage.setItem("userId",this.userId)
     }

    this.getUserInfo()
  this.getBlogList(this.userId,this.pageNumber,this.pageSize)
},

methods: {
  // 获取所有的blog列表
  getBlogList(userId,pageNumber,pageSize){
    // var result = BlogAPI.GetAllByMusicId(musicId,pageNumber,pageSize)
    var result = BlogAPI.GetAllByUserId(userId,pageNumber,pageSize)
      // 获取响应结果 
      result.then((val)=>{
        if(val.success){
          this.blogList=val.data.records
          this.current = val.data.current
          this.total =  val.data.total

          // 清空 blogListLeft:[],  blogListRight:[],
            this.blogListLeft=[];
            this.blogListRight=[];

           // 将列表分为左右列表 下标 %2 =0 在左边
          for (let i = 0; i < this.blogList.length; i++) {
            if( i%2 == 0){
              this.blogListLeft.push(this.blogList[i])
            }else{
              this.blogListRight.push(this.blogList[i])
            }
          }
         
        }else{
          console.log(val.errorMsg)
          this.$toast(val.errorMsg)
        }
            })
  },

  // 获取用户信息
    getUserInfo(){
      var result =UserAPI.Info(this.userId)
      // 获取响应结果 
      result.then((val)=>{
        if(val.success){
          this.tbUser = val.data
        }else{
          this.$toast(val.errorMsg)
        }
            })
    },
   // 页码改变时
   pageChange(val){
    this.pageNumber=val ;
    
      this.getBlogList(this.pageNumber,this.pageSize)
      // this.$toast(this.pageNumber)
  },
},
}
</script>


<style>

</style>